JS_based animation - flipping objects

code:
                <div class="spec">
                    <button>Go</button>
                    <div class="element">♚ ☘ ☕ ✶ ☸</div>
                </div>
                <style>
                    .element {margin-top: 1vw; margin-left: 2vw; background: #6A1B9A; color: white; border-radius: 2vw;  
                        width: 20vw; height: 20vw; display: grid; place-items: center; font-size: 3vw;}
                    button {position: relative;background: darkblue;  color: lightgreen; top: 15vw; left: -4vw; 
                        cursor: pointer;}
                    .flip {animation: flip 0.5s linear both;}
                    @keyframes flip{
                        0% {transform: scale(1) rotate3d(-1, 1, 0, 0deg);}
                        50% {transform: scale(0.5) rotate3d(-1, 1, 0, -90deg);}
                        100% {transform: scale(1) rotate3d(-1, 1, 0, -180deg);}
                    }
                </style>   
                <script>
                    const button = document.querySelector("button");
                    button.addEventListener("click", e => {
                        document.querySelector(".element").classList.toggle("flip")
                    })
        
                </script>